<template>
  <view class="search-r">
    <image src="../../static/svg/search.svg" mode=""></image>
    <input v-model="keyword" type="text" placeholder="输入商品名称" @input="inputHandler">
  </view>
</template>

<script>
  export default {
    name: "search",
    data() {
      return {
        keyword: ""
      };
    },
    methods: {
      inputHandler() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          uni.navigateTo({
            url: "/pages/search_res/search_res?keyword=" + this.keyword
          })
          this.keyword = ""
        }, 500)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-r {
    height: 100%;
    flex: 2;
    padding-left: 10rpx;
    position: relative;

    image {
      height: 40rpx;
      width: 40rpx;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: 25rpx;
    }

    input {
      background-color: #f7f8fa;
      padding: 20rpx 0;
      font-size: 26rpx;
      border-radius: 50px;
      padding-left: 70rpx;
    }
  }
</style>
